// 单聊会话资料
<template>
  <div class="user-profile">
    <div class="user-profile-avatar">
      <Avatar :src="currentConversation.userProfile.avatar" type="C2C" />
    </div>
    <el-card class="profile-card">
      <div class="profile-userid">
        <div class="profile-name">
          用 户
        </div>
        <div class="profile-content" :title="currentConversation.userProfile.userID">
          {{ currentConversation.userProfile.userID }}
        </div>
      </div>
      <div class="profile-nick">
        <div class="profile-name">
          昵 称
        </div>
        <div class="profile-content" :title="currentConversation.userProfile.nick">
          {{ currentConversation.userProfile.nick || '无' }}
        </div>
      </div>
      <div class="profile-gender">
        <div class="profile-name">
          性 别
        </div>
        <div class="profile-content" :title="showGender">
          {{ showGender }}
        </div>
      </div>
      <div class="profile-selfSignature">
        <div class="profile-name">
          签 名
        </div>
        <!-- 个性签名不隐藏 -->
        <div :title="currentConversation.userProfile.selfSignature">
          {{ currentConversation.userProfile.selfSignature || '无' }}
        </div>
      </div>
    </el-card>
  </div>  
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed:{
    ...mapState({
      currentConversation: state => state.conversation.currentConversation
    }),
    showGender(){
      let gender = '';
      switch(this.currentConversation.userProfile.gender){
        case this.TIM.TYPES.GENDER_MALE:
          gender = '♂';
          break;
        case this.TIM.TYPES.GENDER_FEMALE:
          gender = '♀';
          break;
        default: 
          gender = '不明';
          break;
      }
      return gender;
    }
  }
}
</script>

<style scoped>
.user-profile{
  overflow: hidden;
  width: 100%;
}
.user-profile-avatar{
  padding: 36px;
  width: 128px;
  height: 128px;
}
.profile-card{
  font-size: 16px;
  line-height: 22px;
  margin: 20px;
  overflow: hidden;
}
.profile-name{
  float: left;
  padding-right: 16px;
  color: #aaa;
}
.profile-content{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>